
let id = location.search.split('=')[1];
console.log(id);

$.ajax({
  type: "get",
  url: "../interface/dome02.php",
  data: { id },
  dataType: "json"
}).then(res => {
  let pic = JSON.parse(res.picture);
  let pcc = JSON.parse(res.details);

  let template = `
  <div id="one_o" id="one_o">
  <div class="sousuo"><i class="iconfont "></i></div>
  <div class="zhuangui"><i class="iconfont "></i></div>
  <img src="./${pic[6].src}" alt="">
  <div class="mask"></div>
</div>
<div id="imgs">
<ul>
  <li><img src="./${pic[1].src}" alt=""></li>
  <li><img src="./${pic[2].src}" alt=""></li>
  <li><img src="./${pic[3].src}" alt=""></li>
  <li><img src="./${pic[4].src}" alt=""></li>
  <li><img src="./${pic[5].src}" alt=""></li>
</ul>
</div>
<div id="big">
<img src="./${pic[7].src}" alt="">
</div>

<div>
<p><a href="#">举报</a>
<a href="#"><i class="iconfont "></i><span>收藏商品</span></a>
<span>707749人气</span>
</p>
</div>

  `;
  $('#one').html(template);

  let titles = `
  <h5>${res.title}</h5>
  <p>充盈水润 舒缓干涩</p>
  `;
  $('#con_hd').html(titles);

let prices =`
<dt>价格</dt>
<dd><em>￥</em><span id="jiage">${res.price}</span></dd>
`;

$('#pricess').html(prices);

let fenleis = `
<li flag="false"><span>${pcc[0]}</span></li>
<li flag="false"><span>${pcc[1]}</span></li>
<li flag="false"><span>${pcc[2]}</span></li>
`;
$('#fenlei').html(fenleis);




$(function(){

  //   放大镜  
  let Img = $('#content>#cen>#c_left>#one>#one_o>img'),
     small  = $('#content>#cen>#c_left>#one>#one_o'),
     mask   = $('#content>#cen>#c_left>#one>#one_o>.mask'),
     big    = $('#content>#cen>#c_left>#one>#big'),
     bigImg = $('#content>#cen>#c_left>#one>#big>img'),
     smallImg  = $('#content>#cen>#c_left>#one>#imgs>ul>li') ;
     small.on({
       mouseover(){
        mask.css('display','block');
        big.css('display','block');
       },
       mouseout(){
        mask.css('display','none');
        big.css('display','none');
       }
     })
       smallImg.on('mouseover',function(){
         Img.attr('src',`${$(this).children().attr('src').replace('small','big')}`) ;
         bigImg.attr('src',`${$(this).children().attr('src').replace('small','bigimg')}`);
         $(this).css('border','2px solid black').siblings().css('border','none');
       })
      small.on('mousemove',function(ev){
         let x = ev.pageX - mask.width()/2 - Img.offset().left;
         let y = ev.pageY - mask.height()/2 -Img.offset().top;
           x = x < 0 ? 0: x;
           x = x > Img.width()-mask.width()? Img.width()-mask.width():x;
           y = y < 0 ? 0 : y;
           y = y > Img.height()-mask.height()? Img.height()-mask.height():y;
         mask.css('left',x).css('top',y);
         let MaxX = bigImg.width() - big.width(),
         MinX = small.width() - mask.width();
         let a = MaxX/MinX;
         let X = x * a;
         let Y = y * a;
         bigImg.css('marginTop',-Y).css('marginLeft',-X)
       })


//            互动  
       let shu = 1,jiaGe ,zongJia,one,two,three,b=0,c=184,d=262,pan=[];
        function  fn1() {
          if($('#jiage').text().indexOf('-') !== -1){
            jiaGe = $('#jiage').text().split('-')[0];
          }else{
            jiaGe = parseInt($('#jiage').text()).toFixed(2);
      
          }
            zongJia = jiaGe * shu;
            one = (zongJia/3 ).toFixed(2);
            two = (zongJia/6 ).toFixed(2);
            three = (zongJia/12 ).toFixed(2);
            $('#fenqi_1').html(`${one} x3`);
            $('#fenqi_2').html(`${two} x6`);
            $('#fenqi_3').html(`${three} x12`);
             $('#fenqi>li').each((i,el)=>{
                if($(el).attr('flag') === 'true') {
                   $('#fenQi').text(`${$(el).find('.fenqi_1').text()}`);
                }  
             })
             ;
          };
          fn1();
       $('#jia').on('click',function(){
       $('#shuliang').val(`${shu+=1}`);
          if($('#jiage').text().indexOf('-') !== -1){
         jiaGe = $('#jiage').text().split('-')[0];
       }else{
         jiaGe = parseInt($('#jiage').text()).toFixed(2);
   
       }
         zongJia = jiaGe * shu;
         one = (zongJia/3 ).toFixed(2);
         two = (zongJia/6 ).toFixed(2);
         three = (zongJia/12 ).toFixed(2);
         $('#fenqi_1').html(`${one} x3`);
         $('#fenqi_2').html(`${two} x6`);
         $('#fenqi_3').html(`${three} x12`);
          $('#fenqi>li').each((i,el)=>{
             if($(el).attr('flag') === 'true') {
                $('#fenQi').text(`${$(el).find('.fenqi_1').text()}`);
             }  
          }); 
          // fn1();
        console.log(zongJia);
       })
       $('#jian').on('click',function(){
        if(shu <=1){
         $('#shuliang').val(1);
        }else if(shu >1){
         $('#shuliang').val(`${shu-=1}`);
        }
        jiaGe = $('#jiage').text().split('-')[0];
         zongJia = jiaGe * shu;
         one = (zongJia/3 ).toFixed(2)
         two = (zongJia/6 ).toFixed(2);
         three = (zongJia/12 ).toFixed(2);
         $('#fenqi_1').html(`${one} x 3`);
         $('#fenqi_2').html(`${two} x 6`);
         $('#fenqi_3').html(`${three} x 12`);
         $('#fenqi>li').each((i,el)=>{
             if($(el).attr('flag') === 'true') {
               $('#fenQi').text(`${$(el).find('.fenqi_1').text()}`);
             }  
          })
         console.log(zongJia);
       })
       $('#fenqi>li').on('click',function(){
         if($(this).attr('flag') == 'false'){
           $(this).attr('flag','true').css('border','2px solid #FF0036').siblings().attr('flag','false').css('border','1px solid #ccc');
             $('#jiage_fen').css('display','block');$('#fenQi').text(`${$(this).find('.fenqi_1').text()}`);
            }else{
             $('#jiage_fen').css('display','none'); $(this).css('border','1px solid #ccc').attr('flag','false');
            }
       })
       $('#fenlei>li').on('click',function(){
         if($(this).attr('flag') == 'false'){
         $(this).attr('flag','true').css('border','2px solid #FF0036').siblings().attr('flag','false').css('border','1px solid #ccc');
         if($(`#fenlei>li:eq(${0})`).text() ==$(this).text()){
           $('#jifen').text('92');
           $('#jiage').text('184.00');
           $('#shuliang').val();
         jiaGe = parseInt($('#jiage').text()).toFixed(2);
         zongJia = jiaGe * shu;
         one = (zongJia/3 ).toFixed(2);
         two = (zongJia/6 ).toFixed(2);
         three = (zongJia/12 ).toFixed(2);
         $('#fenqi_1').html(`${one} x3`);
         $('#fenqi_2').html(`${two} x6`);
         $('#fenqi_3').html(`${three} x12`);
         }
         if($(`#fenlei>li:eq(${1})`).text() ==$(this).text()){
           $('#jifen').text('93');
           $('#jiage').text('184.00')
           $('#shuliang').val();
         jiaGe = parseInt($('#jiage').text()).toFixed(2);
         zongJia = jiaGe * shu;
         one = (zongJia/3 ).toFixed(2);
         two = (zongJia/6 ).toFixed(2);
         three = (zongJia/12 ).toFixed(2);
         $('#fenqi_1').html(`${one} x3`);
         $('#fenqi_2').html(`${two} x6`);
         $('#fenqi_3').html(`${three} x12`);
         }
         if($(`#fenlei>li:eq(${2})`).text() ==$(this).text()){
           $('#jifen').text('132');
           $('#jiage').text('262.00')
           $('#shuliang').val();
         jiaGe = parseInt($('#jiage').text()).toFixed(2);
         zongJia = jiaGe * shu;
         one = (zongJia/3 ).toFixed(2);
         two = (zongJia/6 ).toFixed(2);
         three = (zongJia/12 ).toFixed(2);
         $('#fenqi_1').html(`${one} x3`);
         $('#fenqi_2').html(`${two} x6`);
         $('#fenqi_3').html(`${three} x12`);
         }
         }else{
           $(this).css('border','1px solid #ccc').attr('flag','false');
         }
       })
       $('#zhifu').on('click',function(){
         if($('#zhifus').attr('flag') == 'false'){
           $('#zhifus').attr('flag','true').css('display','block')
         }else{
           $('#zhifus').attr('flag','false').css('display','none')
         }
       })





       $(function(){
        $('#shangpin>li').on('click',function(){
          $(this).css('borderTop','2px solid red').siblings().css('borderTop','1px solid #ccc');
           if($('#shangpinxiangqing').text() === $(this).text()){
              $('#d_se').css('display','none');
              $('#xiangqing').css('display','block');
           }
           if($('#pingjia').text() === $(this).text()){
              $('#xiangqing').css('display','none');
              $('#d_se').css('display','block');
           }
        })
           $(window).on('scroll',function(){
              if($(document.documentElement).scrollTop() >970){
                 $('#fiexd').css('display','block');
              }else{
                $('#fiexd').css('display','none')
              }
           })
           $('#dianji>li').on('click',function(){
           if($('#dianji_one').text() === $(this).text()){
              $('#d_se').css('display','none');
              $('#xiangqing').css('display','block');
          $(this).css('borderTop','2px solid red').siblings().css('borderTop','1px solid #ccc');
    
           }
           if($('#dianji_two').text() === $(this).text()){
              $('#xiangqing').css('display','none');
              $('#d_se').css('display','block');
          $(this).css('borderTop','2px solid red').siblings().css('borderTop','1px solid #ccc');
    
           }
        })
    
           $('#shangpinfenlei').on('click',function(){
      $('#shanglei').css('display','block')
     })
           $('#fuzhifenlei').on('click',function(){
      $('#shanglei').css('display','none')
     })
          $('#inputs>input').on('click',function(){
      // console.log($(this).siblings('input'));
    
      $(this).siblings('input').prop('checked',false);
      if($(this).attr('id') === 'quanbu'){
        $('#all').css('display','block');
        $('#zhui').css('display','none');
        $('#tu').css('display','none');
      }
      if($(this).attr('id') === 'zhuiping'){
        $('#all').css('display','none');
        $('#zhui').css('display','none');
        $('#tu').css('display','block');
      }
      if($(this).attr('id') === 'tupian'){
        $('#all').css('display','none');
        $('#zhui').css('display','none');
        $('#tu').css('display','block');
      }
    
    })
    
          $('#nav_one>li').on('click',function(){
          
            if($(this).attr('flag') === 'false'){
              $(this).attr('flag','true').css('border','red').siblings().css('border','white').attr('flag','false');
            console.log($(this).children('img').attr('src').replace('small','big'));
            console.log($('#show_img').children('img'));
            $('#show_img').css('display','block').children('img').attr('src',`${$(this).children('img').attr('src').replace('small','big')}`);
            }else{
              $(this).attr('flag','false').css('border','white').siblings().css('border','white').attr('flag','false');
              $('#show_img').css('display','none')
            }
          })
            
    
      })
     
})

//     加入购物车   


function addItem(id, num) {
  let product = { id, num };

  let shop = cookie.get('shop'); // 从cookie中获得数据


  if (shop) { // 判断是否获得到数据
    shop = JSON.parse(shop);

    // 当商品id在cookie数据中已经存在时 需要修改数量 而不是添加商品
    if (shop.some(el => el.id == id)) {
      let index = shop.findIndex(elm => elm.id == id); // 获得商品对象在数组中的索引
      let count = parseInt(shop[index].num);
      count += parseInt(num);
      shop[index].num = count;
    } else {
      shop.push(product);
    }


  } else {
    shop = [];
    shop.push(product);
  }

  cookie.set('shop', JSON.stringify(shop));  // 将数组转换成JSON字符串存入cookie
}

$('#shopCar').on('click', function () {
  addItem(res.id, $('#shuliang').val());
});


}).catch(xhr => {
  console.log(xhr.status);
});


